<template>
	<!-- 外面最大的div -->
	<view class="sideBox">
		<view class="center">
			<!-- 选日期的div -->
			<view class="chooseDateBox">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
			</view>
			<!-- 统计数量的div -->
			<view class="countAll">
				<text></text>
				<view class="stateBox">
					<view class="stu1">
						<text>已签到</text>
						<text>36个小区</text>			
					</view>
					<view class="stu2">
						<text>已签到</text>
						<text>36个小区</text>
					</view>
				</view>
			</view>
			<!-- 详细信息 -->
			<view class="countDetailBox">
				<view class="cD1">
					<text>万科</text>
					<text>已登记: 210户</text>
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
export default {
	data(){
		const currentDate = this.getDate({
			format: true
		})
		return {
			date: currentDate,
			userArr:[{
				name:'万科蓝山',
				state:'已登记',
				num:'210'
			},{
				name:'万科蓝山2',
				state:'已登记',
				num:'710'
			},{
				name:'万科蓝山3',
				state:'已登记',
				num:'410'
			}]
		}
		
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
        bindDateChange: function(e) {
            this.date = e.target.value
        },
        getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
                year = year - 60;
            } else if (type === 'end') {
                year = year + 2;
            }
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        }
    }
}

</script>

<style lang="less" scoped>
@import url('../../utils/remixicon.wxss');
.sideBox {
	width: 750rpx;
	background: #f6f7f8;
	.center {
		width: 690rpx;
		margin: 0 auto;
		.chooseDateBox {
			width: 690rpx;
			height: 132rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: 600;
		}
	}
	
	
}
</style>
